<template>
    <el-menu-item
        v-if="!hasChildren"
        :index="menu.index||index">
        <slot :item="menu">
            <a  href="javascript:void(0)" v-if="'_callback' == (menu.target||'')" v-on:click="$emit('callback',menu.href||'')">{{ menu.name || ''}}</a>
            <a  v-else  :href="menu.href||'javascript:void(0)'" :target="menu.target||'_self'">{{ menu.name || ''}}</a>
        </slot>
    </el-menu-item>
    <el-submenu
        v-else
        :index="menu.index||index">
        <template slot="title">
            <slot :item="menu">
                <a :href="menu.href||'javascript:void(0)'" :target="menu.target||'_self'">{{ menu.name || ''}}</a>
            </slot>
        </template>
        <menu-nav-item v-for="(child, key) in menu.children"
                       v-on:callback="(value)=>{$emit('callback',value)}"
                       :menu="child" :key="key"
                       :index="child.index||(index+'-'+key)">
            <template v-slot="{item}">
                <slot :item="item"></slot>
            </template>
        </menu-nav-item>
    </el-submenu>

</template>


<script>

    export default {
        name: 'menuNavItem',
        props: {
            menu: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            index: {
                type: String,
                default: '0'
            }
        },
        data() {
            return {

            }
        },
        computed:{
            hasChildren(){
                return !LeUtils.isEmpty(LeUtils.valueGet(this.menu, 'children'));
            }
        },
        created() {

        },
        mounted() {
        },
        methods: {

        }
    }
</script>
